<template>
  <alert :alertData="alertData" :opacity="alertOpacity" />

  <div class="div-content-wrapper">
    <aside
      class="aside-menu-wrapper d-flex align-items-center"
      :style="{ transform: `translateX(${asideTranslateXPercentage}%)` }"
    >
      <aside class="aside-menu">
        <ul>
          <li
            :class="{ 'menu-item-selected': selectedMenuItemIndex === 0 }"
            @click="selectedMenuItemIndex = 0"
          >
            <i class="fa-solid fa-circle-nodes"></i>
            图数据库管理
          </li>
        </ul>
      </aside>

      <aside class="aside-sub-menu">
        <ul>
          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 0,
            }"
            @click="selectedSubMenuItemIndex = 0"
          >
            添加实体
          </li>
          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 1,
            }"
            @click="selectedSubMenuItemIndex = 1"
          >
            修改实体
          </li>
          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 2,
            }"
            @click="selectedSubMenuItemIndex = 2"
          >
            删除实体
          </li>

          <div class="div-split-line"></div>

          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 3,
            }"
            @click="selectedSubMenuItemIndex = 3"
          >
            添加关系
          </li>
          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 4,
            }"
            @click="selectedSubMenuItemIndex = 4"
          >
            修改关系
          </li>
          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 5,
            }"
            @click="selectedSubMenuItemIndex = 5"
          >
            删除关系
          </li>

          <div class="div-split-line"></div>

          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 7,
            }"
            @click="selectedSubMenuItemIndex = 7"
          >
            导入数据
          </li>

          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 6,
            }"
            @click="selectedSubMenuItemIndex = 6"
          >
            导出数据
          </li>

          <div class="div-split-line"></div>

          <li
            :class="{
              'sub-menu-item-selected': selectedSubMenuItemIndex === 8,
            }"
            @click="selectedSubMenuItemIndex = 8"
          >
            批量操作
          </li>
        </ul>
      </aside>

      <div class="div-show-hide-aside" @click="toggleAside"></div>
    </aside>

    <div
      class="div-panel-wrapper d-flex justify-content-center align-items-center"
    >
      <graph-db-management
        v-if="selectedMenuItemIndex === 0"
        :itemIndex="selectedSubMenuItemIndex"
        @success="showMessage($event, 'primary')"
        @error="showMessage($event, 'danger')"
      />
    </div>
  </div>
</template>

<script>
import GraphDbManagement from "./management/graph-db-management.vue";
import ANIMATIONS_COMMON from "../modules/AnimationsCommon";
import ANIMATIONS from "@/modules/management/Animations";

import Alert from "../components/Common/alert.vue";

export default {
  components: {
    Alert,
    GraphDbManagement,
  },
  data: () => ({
    alertData: {
      show: false,
      message: "",
      type: "primary",
    },
    alertOpacity: 0,

    asideTranslateXPercentage: 0,

    selectedMenuItemIndex: 0,
    selectedSubMenuItemIndex: 0,
  }),
  methods: {
    showMessage(message, type) {
      ANIMATIONS_COMMON.showAlert(this, message, type);
    },
    toggleAside() {
      ANIMATIONS.toggleAside(this);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../CommonStyles";
@import "../App";

@mixin menu-ul {
  // override default ul & li styles
  margin: 0;
  padding: 20px 12px;
}

@mixin menu-li($font-color, $hover-bkg-color) {
  list-style: none;
  color: $font-color;
  font-size: 14px;

  margin-bottom: 10px;
  padding: 5px 10px;

  border-radius: 4px;

  cursor: pointer;

  transition-duration: 50ms;

  &:hover {
    background-color: $hover-bkg-color;
  }
}

.div-content-wrapper {
  @include full-parent-size;
  background-color: rgb(245, 245, 245);
}

.aside-menu-wrapper {
  position: fixed;
  height: $contentarea-height;
  z-index: $z-index-mamagement-aside;
}

.aside-menu {
  height: 100%;
  background-color: rgb(28, 34, 51);

  ul {
    @include menu-ul();

    li {
      @include menu-li(white, #536183);
    }
  }
}

.menu-item-selected {
  background-color: #536183;
}

.aside-sub-menu {
  height: 100%;
  background-color: white;

  box-shadow: 3px 0px 18px 0px rgba(0, 0, 0, 0.15);

  ul {
    @include menu-ul();

    li {
      @include menu-li(black, #e9f2ff);
    }
  }
}

.div-show-hide-aside {
  width: 0;
  height: 50px;

  box-sizing: content-box;

  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 15px solid white;

  cursor: pointer;

  &::before {
    content: "|";
    color: #aaa;
    position: absolute;
    top: calc(#{$contentarea-height} / 2 - 12.5px);
    right: 5px;
  }
}

.sub-menu-item-selected {
  background-color: #e9f2ff;
}

.div-panel-wrapper {
  @include full-parent-size;
}
</style>